<video>
next.js
GPT-4.icon
HTMLの<video>タグは、ウェブページにビデオコンテンツを埋め込むために使用されます。このタグはHTML5で導入され、Flashのようなプラグインに頼ることなく、直接ビデオをウェブページに組み込むことを可能にしました。<video>タグを使用すると、ファイルのパス、サイズ、再生制御など、ビデオの表示方法を細かく設定できます。
### 基本的な使用方法
code:html
<video src="movie.mp4" controls>
お使いのブラウザはビデオタグをサポートしていません。
</video>
この例では、src属性を使用してビデオファイルの場所を指定し、controls属性を使用してユーザーがビデオを再生、一時停止、音量調整などができるコントロールを表示しています。
### <video>タグでできる操作
1. **再生制御**: controls属性を追加することで、再生、一時停止、音量調整、スクリーンサイズ変更などのコントロールを表示できます。
2. **自動再生**: autoplay属性を使うと、ウェブページの読み込み時に自動的にビデオの再生を開始できます。
3. **ループ再生**: loop属性を使用すると、ビデオが終了すると自動的に再び開始します。
4. **ミュート**: muted属性を設定すると、ビデオの音声をオフにできます。
5. **プリロード**: preload属性を使用して、ページ読み込み時にビデオデータの先読みを制御できます（例: auto, metadata, none）。
6. **複数のソース指定**: <source>タグを使用して、異なるビデオ形式を提供し、ブラウザの互換性を向上させることができます。
### JavaScriptとの連携
JavaScriptを使用すると、<video>タグによるビデオの再生をより細かく制御できます。例えば、ビデオの再生、一時停止、再生位置の設定、音量の調整、再生速度の変更などがプログラム的に可能になります。
### 注意点
- 自動再生を使う場合は、ユーザーエクスペリエンスを考慮し、特に音声があるビデオではmuted属性を併用することが推奨されます。
- 異なるブラウザやデバイスでのビデオフォーマットの互換性に注意する必要があります。一般的には、MP4 (H.264/AAC) 形式が広くサポートされていますが、<source>タグを使用して複数のフォーマットを提供することで互換性を高めることができます。 HTMLの<video>タグとその関連機能により、ウェブ開発者はユーザーに対してリッチなビデオコンテンツを提供することができます。これにより、より魅力的でインタラクティブなウェブサイトやアプリケーションを作成することが可能になります。
関連